<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div>
  
  </div>

  <div>
    <a-space direction="vertical">

      <a-button type="primary" @click="handleClick">获取坐标地址</a-button>
      <a-space>     地址：<a-tag  color="orangered" >{{ address }}</a-tag></a-space>
      <a-space>   坐标： <a-tag  color="orangered" > {{lng_lat  }}</a-tag></a-space>
    
  </a-space>
  </div>
 

 
  <a-modal v-model:visible="visibles" @ok="handleOk" @cancel="handleCancel">
    <div class="map-box">
      <a-form :model="form">
        <a-form-item field="address" tooltip="请输入详细地址" label="地址">
          <a-input-search v-model="address" :style="{width:'320px'}" placeholder="请输入详细地址" search-button @search="SearchAddress"/>
          <!-- <a-input  placeholder="请输入详细地址" /> -->
        </a-form-item>
        <a-form-item field="point" tooltip="坐标位置" label="坐标位置">
          {{ lng_lat }}
        </a-form-item>
      </a-form>
      <!-- 选择地点 -->
      <div id="allmap" style="width:430px;height:300px;"></div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, reactive ,inject  } from 'vue'

const emit = defineEmits(['changeStr'])
const visibles = ref(false)
const address = ref(""); //地址
const point = ref({}); //坐标
const lng_lat = ref({}); //坐标
const addressnotes = ref(""); //地址备注
import endIcon from '../../../assets/end.png'
const form = reactive({
  name: '',
  post: '',
  isRead: false,
});
const handleClick = () => {
  visibles.value = true
}

const handleOk = () => {
  visibles.value = false
  // console.log(address.value)
  // console.log(point.value)
  let lnglat = point.value.lng+','+point.value.lat
  // emit('changeStr', {address:address.value,point:lnglat})

  // ctx.emit(mapReturn,{address:address.value,point:lnglat});
}

const handleCancel = () => {
  visibles.value = false
}
// 初始化 获取坐标  
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition((r) => {
  point.value = r.point;
  lng_lat.value = r.point.lng+','+r.point.lat
  inits(); //根据获取到的经纬度  获取地点名称（这里是因为 地图返回来的位置名称不具体，返回最小值是 市 所以 进行了 经纬度在此传递 获取街道的操作）
  console.log(point.value);
});

const open = (record) => {
  visibles.value = true
    // 打开地图
    setTimeout(() => {
    initMap();  //延迟调用渲染地图是因为 电脑上调试的时候  地图加载缓慢 或者加载失败  
  }, 1000);
}



// 创建地图且监听拖动
const initMap = () => {
  let Bmap = window.BMap;
  let map = new Bmap.Map("allmap");

  map.centerAndZoom(new Bmap.Point(point.value.lng, point.value.lat), 1);
  // 添加中心点
  // tubiao(Bmap, map);
  map.enableDragging(); //启用在地图上拖动
  map.addEventListener("dragend", function () {
    var center = map.getCenter(); // Get the new center point
    point.value.lng = center.lng;
    point.value.lat = center.lat;

    lng_lat.value =  center.lng+','+ center.lat
    tubiao(Bmap, map);
    inits(Bmap);
    console.log(" ", point.value.lng, point.value.lat);
  });
};

const marker = ref(null);

// 图标位置渲染   地图中心点代表自己想要的位置 ；  初始化的时候  为自己的位置
const tubiao = (Bmap, map) => {
  var myIcon = new BMap.Icon(
    endIcon,
    new BMap.Size(38, 38)
  );
  if (marker.value) {
    //位置存在则销毁 坐标点
    map.removeOverlay(marker.value);
  }
  //添加坐标点位置 图标
  marker.value = new BMap.Marker(
    new Bmap.Point(point.value.lng, point.value.lat),
    {
      icon: myIcon,
    }
  );
  map.addOverlay(marker.value);
};
//拖动获取坐标地点位置名称
const inits = (Bmap) => {
  let geocoder = new BMap.Geocoder();
  let points = new BMap.Point(point.value.lng, point.value.lat);
  geocoder.getLocation(points, function (result) {
    console.log(result)
    if (result) {
      address.value = result.address;
    }
  });
};

const SearchAddress = (val)=>{

console.log(val)
  getPointByAddress(val)

}

//根据地址获取
const getPointByAddress= (address)=>{
  let Bmap = window.BMap;
  let map = new Bmap.Map("allmap");
  map.enableScrollWheelZoom(true);      //开启鼠标滚轮缩放
  map.enableDoubleClickZoom(true); //开启双击缩放
// 创建地址解析器实例
  let myGeo = new BMap.Geocoder();
	// 将地址解析结果显示在地图上,并调整地图视野
	myGeo.getPoint(address, function(p){
// tubiao(Bmap, map);
  map.enableDragging(); //启用在地图上拖动
  map.addEventListener("dragend", function () {
    var center = map.getCenter(); // Get the new center point
    point.value.lng = center.lng;
    point.value.lat = center.lat;

    lng_lat.value =  center.lng+','+ center.lat
    tubiao(Bmap, map);
    inits(Bmap);
    console.log(" ", point.value.lng, point.value.lat);
  });
    point.value = p
    lng_lat.value =  p.lng+','+ p.lat
		if (p) {
			map.centerAndZoom(p, 16);
			map.addOverlay(new BMap.Marker(p));
		}else{
			alert("您选择地址没有解析到结果!");
		}
	}, "北京市");


}
	

defineExpose({ open })
</script>
<script>
export default { name: 'ma-map' }
</script>

<style scoped>
.map-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.list {
  display: flex;
}
</style>
